<!DOCTYPE HTML>
<script src="../resources/text-based-repaint.js"></script>
<style>
body {
  margin: 0;
}
#vbox {
  display: flex;
  flex-direction: column;
  width: 200px;
  height: 100px;
}
#scroller {
  /* translucent to prevent compositing */
  background-color: rgba(128, 128, 128, 0.5);
  flex: 1 1;
  overflow: auto;
}
.content {
  font: 15px Ahem;
  line-height: 25px;
  min-height: 30px;
}
</style>

<div id="vbox">
  <div id="scroller">
    <div class="content" id="dynamic">a</div>
    <div class="content">b</div>
    <div class="content">c</div>
    <div class="content">d</div>
    <div class="content">e</div>
    <div class="content">f</div>
    <div class="content">g</div>
  </div>
</div>

<script>
function repaintTest() {
  document.getElementById("dynamic").innerHTML = "z";
}
onload = runRepaintTest;
</script>
